const path = require('path');

//导入在内存中生存html页面的插件

//这个插件的作用
//1.自动在内存中根据指定的页面生成一个内存页面
//2.自动把打包好的index.js放到html中去
const htmlwebpackplugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');


//分离css文件
// const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); //压缩js


module.exports = {
    // mode:'production',
    entry:'./src/main.js' ,//入口文件
    output:{
        path:path.join(__dirname,'./dist/js'), //输出文件的目录
        filename:'index.js' //输出文件的名称
    },
    devServer:{//这里是配置dev-server命令参数的第二种形式
        open:true,//自动打开浏览器
        contentBase:'src',//指定托管根目录
        port:3000,//指定端口号
        hot:true,//启用热更新
    },
    plugins:[//配置插件的节点
        new htmlwebpackplugin({
            template:path.join(__dirname,'./src/index.html'),//模板路径
            filename:'index.html', //指定生成页面的名字
            // minify:{
            //     removeAttributeQuotes:true, //删除文件内的双引号
            //     collapseWhitespace:true,//删除文件内的空格换行
            // },
            // hash:true, //为引用的文件添加一个 hash值
        }),
        new VueLoaderPlugin()
        // new MiniCssExtractPlugin({
        //     filename:'./index.css'
        // }),//分离css
    ],
    module:{//这个节点 用来配置所有的第三方模块 加载器
        rules:[
       
            {test:/\.css$/,use:[
                // MiniCssExtractPlugin.loader,
                'style-loader',
                'css-loader',
                {
                loader:'postcss-loader',
                    options:{
                        plugins: [require('autoprefixer')]
                    }
                }
            ]},//配置处理css文件的第三方loader
            {test:/\.less$/,use:[
                // MiniCssExtractPlugin.loader,
                'style-loader',
                'css-loader',
                {
                loader:'postcss-loader',
                    options:{
                        plugins: [require('autoprefixer')]
                    }
                },
                'less-loader',
            ]},//配置处理less文件的第三方loader
            {
                test: /\.(ttf|eot|svg|woff|woff2|otf)$/,
                use: 'url-loader'
            },
            { test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=4279&name=[name]-[hash:7].[ext]'},
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,//匹配时排除该文件夹
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'], //预设
                        plugins:[
                            '@babel/plugin-proposal-class-properties' //针对class
                        ]
                    }
                }
            },
            { test:/\.vue$/,use: 'vue-loader'}
 
        ]

    },
    resolve:{
        alias: { // 修改 Vue 被导入的时候的包的路径
            'vue$': 'vue/dist/vue.esm.js'
          }
    }
}
